<template>
  <view :style="colorStyle">
    <navTitle :title="'推广人统计'" />
    <view class="bg">
      <view class="block1"> </view>
      <image
        src="http://xpj40szpt.signalpha.cn/img/img22.png"
        mode="widthFix"
      ></image>
    </view>

    <view class="infobox1 flex aitems">
      <image :src="info.avatar" class="block1" mode="aspectFill"></image>
      <view class="block2">
        <view class="info flex aitems cfff">
          <view class="info1 f32">
            {{ info.nickName || "" }}
          </view>
          <view class="info2 f20 themeColor">
            {{ level[info.level] }}
          </view>
        </view>
        <view class="ids cfff f24"> ID： {{ info.id || "" }} </view>
      </view>
    </view>

    <view class="main">
      <view class="infobox6 flex sa">
        <view
          class="tablist"
          v-for="(item, index) in tablist1"
          @click="tablistChange1(index)"
          :key="item.id"
        >
          <view
            class="name c525252 f32"
            :style="{
              color: `${tablistindex1 == index ? 'var(--view-theme)' : ''}`,
            }"
          >
            {{ item.name }}
          </view>
          <view class="border" v-if="tablistindex1 == index"> </view>
        </view>
      </view>

      <view class="infobox3 flex aitems sa">
        <view class="block1">
          <view class="info1 c1F1F1F f40 fontWeight">
            {{ totalInfo.orderAmount || 0 }}
          </view>
          <view class="info2 c525252 f28"> 佣金总数 </view>
        </view>
        <view class="block1">
          <view class="info1 c1F1F1F f40 fontWeight">
            {{ totalInfo.userNum || 0 }}
          </view>
          <view class="info2 c525252 f28"> 推广总人数 </view>
        </view>
        <view class="block1">
          <view class="info1 c1F1F1F f40 fontWeight">
            {{ totalInfo.orderNum || 0 }}
          </view>
          <view class="info2 c525252 f28"> 推广总订单 </view>
        </view>
      </view>

      <view class="infobox2">
        <view class="infobox4 flex sa">
          <view
            class="tablist"
            v-for="(item, index) in tablist"
            @click="tablistChange(index)"
            :key="item.id"
          >
            <view
              class="name c858585 f32"
              :style="{
                color: `${tablistindex == index ? 'var(--view-theme)' : ''}`,
              }"
            >
              {{ item.name }}
            </view>
            <view class="border" v-if="tablistindex == index"> </view>
          </view>
        </view>

        <view class="infobox5 flex aitems">
          <image src="@/static/img30.png" class="block1" mode=""></image>
          <input
            type="text"
            placeholder="请输入订单号，用户名"
            v-model="name"
            class="c1F1F1F f24"
            placeholder-class="c858585 f24"
            @confirm="search"
          />
          <view class="block2 cfff f28" @click="search"> 查询 </view>
        </view>

        <view class="listmain">
          <view class="list" v-for="(item, index, key) in list" :key="key">
            <view class="flex">
              <image
                :src="item.avatar"
                mode="aspectFill"
                class="headimg"
              ></image>
              <view class="block1">
                <view class="info1 flex aitems between">
                  <view class="tipbox1">
                    <view class="tip1 c1F1F1F f32 fontWeight flex aitems">
                      <view class="">
                        {{ item.nickName || "" }}
                      </view>
                      <view class="level cfff f20" v-if="item.isPlace">
                        分销员
                      </view>
                    </view>
                    <view class="stars flex c1F1F1F f24">
                      {{ item.bindingTime || "" }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="info2 flex aitems sa">
              <view class="tipbox1" v-if="tablistindex == 0">
                <view class="tip1 c1F1F1F f40 fontWeight">
                  {{ item.userNum || 0 }}
                </view>
                <view class="tip2 c525252 f28"> 推广人数 </view>
              </view>

              <view class="tipbox1">
                <view class="tip1 c1F1F1F f40 fontWeight">
                  {{ item.orderNum || 0 }}
                </view>
                <view class="tip2 c525252 f28"> 贡献订单 </view>
              </view>

              <view class="tipbox1">
                <view class="tip1 c1F1F1F f40 fontWeight">
                  {{ item.orderAmount || 0 }}
                </view>
                <view class="tip2 c525252 f28"> 贡献佣金 </view>
              </view>
            </view>
          </view>
        </view>
        <nodata v-if="list.length == 0" />
        <view class="" v-if="list.length == 0" style="height: 100rpx"> </view>
      </view>
    </view>

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  placeUserPage,
  placeTotal,
  userinfo,
  levelList,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getToken } from "../../utils/storage";
import {
  getStartOfMonth,
  getEndOfMonth,
  getThisWeekDates,
} from "@/utils/util.js";
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  data() {
    return {
      tablist: [
        {
          name: "",
        },
        {
          name: "",
        },
      ],
      tablistindex: 0,
      tablist1: [
        {
          name: "全部",
        },
        {
          name: "本月",
        },
        {
          name: "本周",
        },
      ],
      tablistindex1: 0,
      list: [],
      info: {},
      level: {},
      total: 0,
      current: 1,
      totalInfo: {},
      createTimeBegin: "",
      createTimeEnd: "",
      userTotal: {
        data1: 0,
        data2: 0,
      },
      name: "",
    };
  },
  async onLoad(options) {
    if (getToken()) {
      await this.levelList();
      await this.userinfo();
      this.placeUserPage();
      this.getUserNumTotal();
      this.placeTotal();
    }
  },
  async onShow() {
    if (getToken()) {
      // await this.levelList();
      // await this.userinfo();
      // this.placeTotal();
    }
  },
  methods: {
    async getUserNumTotal() {
      let data1 = await placeUserPage({
        current: 1,
        size: 1,
        bindingTimeBegin: this.createTimeBegin,
        bindingTimeEnd: this.createTimeEnd,
        createTimeBegin: this.createTimeBegin,
        createTimeEnd: this.createTimeEnd,
        parentId: this.info.id,
        grandpaId: "",
        nickName: this.name,
      });
      if (data1.data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.userTotal.data1 = data1.data.data.total;
        this.tablist[0].name = `直接 (${data1.data.data.total})`;
      }

      let data2 = await placeUserPage({
        current: 1,
        size: 1,
        bindingTimeBegin: this.createTimeBegin,
        bindingTimeEnd: this.createTimeEnd,
        createTimeBegin: this.createTimeBegin,
        createTimeEnd: this.createTimeEnd,
        parentId: "",
        grandpaId: this.info.id,
        nickName: this.name,
      });
      if (data2.data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.userTotal.data2 = data2.data.data.total;
        this.tablist[1].name = `间接 (${data2.data.data.total})`;
      }
    },
    async placeTotal() {
      let { data } = await placeTotal({
        createTimeBegin: this.createTimeBegin,
        createTimeEnd: this.createTimeEnd,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.totalInfo = info;
      }
      uni.stopPullDownRefresh();
    },
    async levelList() {
      loading();
      let { data } = await levelList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        let obj = {};
        for (let key of list) {
          obj[key.id] = key.name;
        }
        this.level = obj;
        console.log(this.level);
      }
      uni.hideLoading();
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
      }
      uni.hideLoading();
    },
    async placeUserPage() {
      loading();
      let { data } = await placeUserPage({
        current: this.current,
        size: 10,
        bindingTimeBegin: this.createTimeBegin,
        bindingTimeEnd: this.createTimeEnd,
        createTimeBegin: this.createTimeBegin,
        createTimeEnd: this.createTimeEnd,
        parentId: this.tablistindex == 0 ? this.info.id : "",
        grandpaId: this.tablistindex == 1 ? this.info.id : "",
        nickName: this.name,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    tablistChange(index) {
      this.tablistindex = index;
      this.current = 1;
      this.placeUserPage();
    },
    tablistChange1(index) {
      this.tablistindex1 = index;
      if (this.tablistindex1 == 0) {
        this.createTimeBegin = "";
        this.createTimeEnd = "";
      }
      if (this.tablistindex1 == 1) {
        this.createTimeBegin = getStartOfMonth().dateValue + " 00:00:00";
        this.createTimeEnd = getEndOfMonth().dateValue + " 23:59:59";
      }
      if (this.tablistindex1 == 2) {
        this.createTimeBegin =
          getThisWeekDates().startDate.dateValue + " 00:00:00";
        this.createTimeEnd = getThisWeekDates().endDate.dateValue + " 23:59:59";
      }
      this.current = 1;
      this.placeUserPage();
      this.placeTotal();
      this.getUserNumTotal();
    },
    search() {
      this.current = 1;
      this.placeUserPage();
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.placeUserPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.placeUserPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bg {
  width: 100%;
  height: 750rpx;
  background: linear-gradient(
    180deg,
    var(--view-theme) 74.53%,
    rgba(92, 206, 221, 0) 100%
  );
  position: absolute;
  top: 0;

  .block1 {
    background: linear-gradient(
      180deg,
      var(--view-theme) 0%,
      var(--view-theme) 100%
    );
  }

  image {
    width: 100%;
  }
}

.infobox1 {
  position: relative;
  z-index: 1;
  margin: 50rpx 30rpx 0;

  .block1 {
    width: 96rpx;
    height: 96rpx;
    border-radius: 96rpx;
  }

  .block2 {
    margin-left: 24rpx;
    width: calc(100% - 24rpx - 96rpx);

    .info {
      .info1 {
      }

      .info2 {
        margin-left: 16rpx;
        border-radius: 20rpx;
        background: #fff;
        padding: 4rpx 18rpx;
      }
    }

    .ids {
      margin-top: 8rpx;
    }
  }
}

.infobox2 {
  border-radius: 28rpx;
  background: #fff;
  margin: 17rpx 30rpx 0;
  padding: 22rpx 0 0;
  position: relative;
  z-index: 1;

  .listmain {
    margin: 48rpx 0 0;
  }

  .list {
    padding: 0 28rpx 32rpx;
    margin: 0 0 36rpx 0;
    border-bottom: 1px solid #f5f5f5;

    .headimg {
      width: 85rpx;
      height: 85rpx;
      border-radius: 57rpx;
    }

    .block1 {
      // padding: 0 0 36rpx 0;
      margin-left: 24rpx;
      width: calc(100% - 24rpx - 85rpx);

      .info1 {
        .tipbox1 {
          .tip1 {
            .level {
              background: var(--view-theme);
              border-radius: 20rpx;
              padding: 4rpx 18rpx;
              margin-left: 7rpx;
            }
          }

          .stars {
            margin: 8rpx 0 0;

            image {
              width: 32rpx;
              height: 32rpx;
              margin: 0 8rpx 0 0;
            }
          }
        }

        .tipbox2 {
          .tip1 {
          }

          .tip2 {
            margin-left: 8rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .info2 {
      margin: 36rpx 0 0;

      .tipbox1 {
        width: 33.33%;
        text-align: center;

        .tip1 {
        }

        .tip2 {
          margin-top: 8rpx;
        }
      }
    }
  }
}

.infobox3 {
  border-radius: 28rpx;
  background: #fff;
  margin: 24rpx 30rpx 0;
  padding: 36rpx 0;
  position: relative;
  z-index: 1;

  .block1 {
    width: 33.33%;
    text-align: center;

    .info1 {
    }

    .info2 {
      margin-top: 8rpx;
    }
  }
}

.main {
  margin: 36rpx 0 0;
  border-radius: 28rpx 28rpx 0 0;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #fff 0%, #f5f5f5 12.49%, #f5f5f5 100%);
}

.infobox4 {
  // position: fixed;
  width: 100%;
  // padding: 22rpx 0 0;
  // background: #fff;
  z-index: 99;

  .tablist {
    .name {
    }

    .border {
      margin: 18rpx auto 0;
      width: 64rpx;
      height: 8rpx;
      border-radius: 20rpx;
      background: var(--view-theme);
    }
  }
}

.infobox5 {
  border-radius: 36rpx;
  background: #f5f5f5;
  position: relative;
  height: 72rpx;
  overflow: hidden;
  padding: 0 40rpx;
  margin: 8rpx 30rpx 0;

  .block1 {
    width: 40rpx;
    height: 40rpx;
  }

  input {
    width: calc(100% - 12rpx - 40rpx - 112rpx);
    margin-left: 12rpx;
  }

  .block2 {
    position: absolute;
    right: 4rpx;
    height: 64rpx;
    line-height: 64rpx;
    width: 112rpx;
    text-align: center;
    background: var(--view-theme);
    top: 4rpx;
    border-radius: 36rpx;
  }
}

.infobox6 {
  // position: fixed;
  width: 100%;
  padding: 22rpx 0 0;
  // background: #fff;
  z-index: 99;

  .tablist {
    .name {
    }

    .border {
      margin: 18rpx auto 0;
      width: 64rpx;
      height: 8rpx;
      border-radius: 20rpx;
      background: var(--view-theme);
    }
  }
}
</style>
